import React, { useState } from 'react';
import {
  Assets,
  View,
  Icon,
  Text,
  Slider,
  GradientSlider,
  Colors,
  ThemeManager
} from 'react-native-ui-lib';
import { renderBooleanOption } from '../ExampleScreenPresenter';
import { TestCase, TestSuite } from '@rnoh/testerino';

const DEFAULT_BADGE_SIZE = 20;
const DEFAULT_PIMPLE_SIZE = 10;

const recorderTag = 'icon';

ThemeManager.setComponentTheme('Icon', (props, context) => {
  if (props.recorderTag === recorderTag) {
    return {
      size: 12, 
      tintColor: "red"
    };
  }
  return {}; 
});

const IconScreen = () => {
  const [size, setSize] = useState(24);
  const [badgeSize, setBadgeSize] = useState(20);
  const [customSize, setCustomSize] = useState(false);
  const [customBadgeSize, setCustomBadgeSize] = useState(false);
  const [color, setColor] = useState<string | number>();
  const [customColor, setCustomColor] = useState(false);
  const [useBadge, setUseBadge] = useState(false);
  const [usePimple, setUsePimple] = useState(false);

  return (
    <TestSuite name="Icon">
      <TestCase itShould="设置 size">
        <View padding-20>
          <Icon
            size={24}
            source={Assets.internal.icons.search}
          />
          <Icon
            size={12}
            source={Assets.internal.icons.search}
          />
        </View>
      </TestCase>

      <TestCase itShould="设置 tintColor">
        <View padding-20>
          <Icon
            size={24}
            tintColor="red"
            source={Assets.internal.icons.search}
          />
          <Icon
            size={24}
            tintColor="blue"
            source={Assets.internal.icons.search}
          />
        </View>
      </TestCase>

      {/* <TestCase itShould="设置 assetName">
        <View padding-20>
          <Icon
            size={24}
            assetName="search"
            source={Assets.internal.icons.search}
          />
          <Icon
            size={24}
            assetName="add"
            source={Assets.internal.icons.add}
          />
        </View>
      </TestCase> */}

      <TestCase itShould="设置 recorderTag">
        <View padding-20>
          <Icon
            recorderTag={recorderTag}
            source={Assets.internal.icons.search}
          />
          <Icon
            size={24}
            source={Assets.internal.icons.search}
          />
        </View>
      </TestCase>

      {/* <TestCase itShould="设置 assetName">
        <View padding-20>
          <Icon
            size={24}
            assetName="add"
            source={Assets.internal.icons.search}
          />
          <Icon
            size={24}
            assetName="bell.png"
            source={Assets.internal.icons.search}
          />
        </View>
      </TestCase> */}


      {/* <TestCase itShould="例子:">
        <View padding-20>
          <View padding-page>
            <Text h1 marginB-s4>
              Icon Screen
            </Text>


            {renderBooleanOption('Custom Size', 'customSize', {
              spread: false,
              state: customSize,
              setState: setCustomSize,
            })}
            <Slider migrate
              maximumValue={100}
              value={24}
              step={1}
              onValueChange={setSize}
            />
            <Text marginB-50 marginT-s2>
              Custom size: {size}
            </Text>

            <View center margin-page>
              <Icon
                size={customSize ? size : undefined}
                tintColor={customColor ? (color as string) : undefined}
                source={Assets.internal.icons.search}
                badgeProps={
                  useBadge
                    ? {
                      size: customBadgeSize
                        ? badgeSize
                        : usePimple
                          ? DEFAULT_PIMPLE_SIZE
                          : DEFAULT_BADGE_SIZE,
                      backgroundColor: Colors.red30,
                      label: !usePimple ? '5' : undefined,
                    }
                    : undefined
                }
              />
            </View>

            {renderBooleanOption('Custom Badge Size', 'customBadgeSize', {
              spread: false,
              state: customBadgeSize,
              setState: setCustomBadgeSize,
            })}
            <Slider migrate
              maximumValue={100}
              value={20}
              step={1}
              onValueChange={setBadgeSize}
            />
            <Text marginB-50 marginT-s2>
              Custom badge size: {badgeSize}
            </Text>

            {renderBooleanOption('Custom Color', 'customColor', {
              spread: false,
              state: customColor,
              setState: setCustomColor,
            })}
            <GradientSlider
              type={GradientSlider.types.HUE}
              color={color as string}
              onValueChange={setColor}
            />
            <Text marginT-s2>Custom color: {color || '#000000'}</Text>

            <View marginV-s5>
              <Text marginR-s2 marginB-s2 text80BO>
                Badge Settings:
              </Text>
              {renderBooleanOption('Use Badge:', 'useBadge', {
                spread: false,
                state: useBadge,
                setState: setUseBadge,
              })}
              {renderBooleanOption('Pimple Badge', 'showLabel', {
                spread: false,
                state: usePimple,
                setState: setUsePimple,
              })}
            </View>

            <View row center margin-page>
              <Text marginB-5 marginT-s2>
                supportRTL: true
              </Text>
              <Icon
                size={20}
                supportRTL={true}
                source={Assets.internal.icons.search}
              />
            </View>

            <View row center margin-page>
              <Text marginB-5 marginT-s2>
                supportRTL: false
              </Text>
              <Icon
                size={20}
                supportRTL={false}
                source={Assets.internal.icons.search}
              />
            </View>
          </View>
        </View>
      </TestCase> */}
    </TestSuite>
  );
};

export default IconScreen;
